<!-- 合同基础设置 -->
<template>
  <div class="step2">
    <div class="tab">
      <div class="title">选择合同与附件：</div>
      <a-space>
        <a-button
          v-for="(item, index) in temList"
          :key="index"
          size="mini"
          class="butss"
          :status="choiceIndex === index ? 'success' : 'normal'"
          shape="round"
          @click="choiceIndex = index"
        >
          {{ item.name }}
        </a-button>
      </a-space>
    </div>
    <RichTextTemplate
      style="flex: 1"
      v-model:codes="richTextTemplateValue.codes"
      v-model:text="richTextTemplateValue.text"
      :height="600"
    />
  </div>
</template>

<script setup lang="ts">
let choiceIndex = ref(0);
let temList = ref<any[]>([]);
defineExpose({
  setData(templateList: any[]) {
    temList.value = templateList || [];
  },
  getData() {
    return temList.value;
  }
});

let richTextTemplateValue = computed({
  get() {
    if (!temList.value.length) return {};
    return temList.value[choiceIndex.value];
  },
  set(val) {
    temList.value[choiceIndex.value] = { ...val };
  }
});
</script>

<style lang="less" scoped>
.step2 {
  width: 100%;
  .tab {
    display: flex;
    justify-content: left;
    align-items: center;
    height: 25px;
    margin-bottom: 10px;
    .title {
      font-size: 16px;
      margin-right: 10px;
    }
  }
}
</style>
